<template>
    <div>
        <div class="toolbars">
            <!-- 左对齐，居中，右对齐，标题，有序列表，加入，插入时间，颜色 -->
            <div class="items" @click="justifyleft">
                <svg t="1673415413021" class="icon"
                    style="width: .9em;height: .9em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3615">
                    <path d="M96 128h832v96H96zM96 576h832v96H96zM96 352h576v96H96zM96 800h576v96H96z" p-id="3616"
                        data-spm-anchor-id="a313x.7781069.0.i2"></path>
                </svg>
            </div>
            <div class="items" @click="justifycenter">
                <svg t="1673415952067" class="icon" style="width: .9em;height: .9em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3917"><path d="M96 128h832v96H96zM96 576h832v96H96zM224 352h576v96H224zM224 800h576v96H224z" p-id="3918" data-spm-anchor-id="a313x.7781069.0.i6"></path></svg>
            </div>
            <div class="items" @click="justifyright">
                <svg t="1673415931693" class="icon" style="width: .9em;height: .9em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3766"><path d="M96 128h832v96H96zM96 576h832v96H96zM352 352h576v96H352zM352 800h576v96H352z" p-id="3767" data-spm-anchor-id="a313x.7781069.0.i4"></path></svg>
            </div> 
            <div class="items" @click="insertOrderedList">
                <svg t="1673416084244" class="icon" style="width: .9em;height: .9em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4857"><path d="M849.1 128 174.9 128c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 149 875 128 849.1 128z" p-id="4858"></path><path d="M849.1 768 174.9 768c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 789 875 768 849.1 768z" p-id="4859"></path><path d="M849.1 448 174.9 448c-25.9 0-46.9 21-46.9 46.9l0 34.2c0 25.9 21 46.9 46.9 46.9l674.2 0c25.9 0 46.9-21 46.9-46.9l0-34.2C896 469 875 448 849.1 448z" p-id="4860" data-spm-anchor-id="a313x.7781069.0.i8"></path></svg>
            </div>
            <div class="items" @click="instertTime">
                <svg t="1673426135523" class="icon" style="width: .9em;height: .9em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8336"><path d="M512 938.666667a426.666667 426.666667 0 1 1 426.666667-426.666667 426.666667 426.666667 0 0 1-426.666667 426.666667z m0-789.333334a362.666667 362.666667 0 1 0 362.666667 362.666667A362.666667 362.666667 0 0 0 512 149.333333z" fill="#333333" p-id="8337" data-spm-anchor-id="a313x.7781069.0.i10"></path><path d="M714.666667 576h-234.666667a32 32 0 0 1-32-32v-234.666667a32 32 0 0 1 64 0V512h202.666667a32 32 0 0 1 0 64z" fill="#FF9C00" p-id="8338"></path></svg>
            </div>
            <div  class="coloritme" 
                 v-for="item in colors"
                 :key="item"  
                 @click="fontcolor(item)"
            >   
               <div :style="{background:item}"></div>
            </div>
        </div>
    </div>
</template>

<script>
 let keys = {
     'Digit1':'h1',
     'Digit2':'h2',
     'Digit3':'h3',
     'Digit4':'h4',
     'Digit5':'h5',
     'Digit6':'h6', 
 }
export default {
    name: 'editorwarp',
    data(){
         return {
             colors:['#4b5563','#8b5cf6','#3b82f6','#10b981','#ef4444']
         }
    },
    mounted(){
        // 快捷键注册
        // window.addEventListener('keyup', this.handleKeyPress, true)
    },
    methods: {
        handleKeyPress(e){
              if(keys[e.code]){
                  this.fonttitle(keys[e.code])
              }
        },
        justifyleft() {
            document.execCommand('justifyLeft', false,null);
        },
        justifycenter() {
            document.execCommand('justifyCenter', false,null);
        },
        justifyright() {
            document.execCommand('justifyRight', false,null);
        },  
        insertOrderedList(){
            // insertUnorderedList
            document.execCommand('insertUnorderedList', false,null)
        },
        // 插入时间
        instertTime(){
            let time = new Date();
            let str = `<div class="tims" contenteditable="false">📌${time.toLocaleString()}</div>`
            document.execCommand('insertHTML', false,str)
        },
        fontcolor(val) {
            document.execCommand('foreColor',false,val)
        },
        // 快捷键创建 标题 h1-h6
        fonttitle(val){
            document.execCommand('insertParagraph', true,null)
        }
    }
} 
</script>
<style lang="less">
@sysfont: century gothic, texgyreadventor, stheiti, sans-serif;
.tims{
     background-color: #fed7aa;
     font-size: .8rem;
     padding: 1px 3px;
     display: inline-block;
     border-radius: 3px;
     font-family:@sysfont;
     margin-right: .5rem;
}
.coloritme{
     width: 18px;
     height: 18px;
     padding: 2px;
     box-sizing: border-box;
     border-radius: 50%;
     border: 2px solid #f1f5f9;
     margin-right: .8rem; 
     cursor: pointer; 
     &>div{
         width: 100%;
         height: 100%;
         border-radius: 50%;
         &:active{
            transform: scale(.9);
        }
     }
}
.toolbars {
    width: 100%;
    display: flex;
    align-items: center;
   
    .icon{
    color: #475569;
    }
    .items{
        margin-right: .8rem; 
        // background-color: red;
        cursor: pointer; 
        &:active{
            transform: scale(.9);
        }
    }
}
</style>